<template>
  <div>
    <van-tabbar v-model="active"
                :route=true
                active-color="#e12d23">
      <van-tabbar-item v-for="item in tabbar"
                       :key="item.id"
                       :name="item.linkTo"
                       :icon="item.icon"
                       :to="item.linkTo"
                       replace>{{item.name}}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: '/home/hot',
      tabbar: [
        {
          id: 1,
          name: '主页',
          icon: 'shop',
          linkTo: '/home/hot'
        },
        {
          id: 2,
          name: '推荐',
          icon: 'hot',
          linkTo: '/recomend'
        },
        {
          id: 3,
          name: '购物车',
          icon: 'shopping-cart',
          linkTo: '/cart'
        },
        {
          id: 5,
          name: '个人',
          icon: 'manager',
          linkTo: '/user'
        }
      ]
    }
  },
  created () {

  },
  mounted () {
    console.log(this.$route);
    if (this.$route.matched[1].path === '/home') {
      // console.log(this.$route);
      // console.log('tabbar');
      // console.log(this.$route);
      this.active = '/home/hot';

    } else {
      this.active = this.$route.path;
    }

  },
  computed: {

  },
  components: {

  },
  methods: {

  }
}
</script>

<style scoped lang="css">
.van-tabbar {
  height: 91px;
}
</style>
